<%@ page contentType="text/html; charset=UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%
	request.setCharacterEncoding("UTF-8");
	String cp = request.getContextPath(); 
	String end = "";
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="<%=cp%>/data/js/jquery-1.8.2.min.js"></script>
<%-- <link href="<%=cp%>/data/css/common.css" rel="stylesheet" type="text/css" /> --%>
<link href="<%=cp%>/tour/css/common.css" rel="stylesheet" type="text/css" />
<link href="<%=cp%>/tour/css/reset.css" rel="stylesheet" type="text/css" />
<link href="<%=cp%>/tour/css/fit.css" rel="stylesheet" type="text/css" />
<link href="<%=cp%>/tour/css/fitExt.css" rel="stylesheet" type="text/css" />
<link href="<%=cp%>/tour/css/cont_free.css" rel="stylesheet" type="text/css" />
<link href="<%=cp%>/tour/css/layout_free.css" rel="stylesheet" type="text/css" />
<link href="<%=cp%>/tour/css/style_tour.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container">
                
    <!-- [s] freeMaster 내용  -->
    <div class="free_view_tit mgt10">
        <h1>
            ${dto.subject}
        </h1>
        <p>
            ${dto.memo} 
        </p>
    </div>
    <div class="free_view_summary clearFix">
        <div class="floatL">
            <div class="imgbox">
                <div class="img">
                    <img alt="메인이미지" src="<%=cp%>/pds/data/${dto.image}"></div>
                <div class="imgexp">
                    ${dto.subject}</div>
                <div class="btn_big"  onclick="Window.center('/Product/Common/PhotoGallery.aspx?code=JPF6073&mode=2', 'Gallery', 554, 589, 'no');return false;" style="cursor:pointer;">
                    큰 이미지 보기</div>
                <div class="bg">
                </div>
            </div>
        </div>
        <div class="textbox floatL">
            <table border="0" cellspacing="0" cellpadding="0">
                <caption class="hide">
                    상품요약정보</caption>
                <tbody>
                    <tr>
                        <th scope="row">
                            <img alt="상품코드" src="<%=cp%>/tour/image/listArticle/label_detail_t10.gif" width="56" height="13">
                        </th>
                        <td>
                            <a class="link_type4" href="#"  onclick="copy_clip(this.innerHTML);"><b>${dto.tourNo}</b></a>
                        </td>
                    </tr>
                    <tr>
                        <th scope="row">
                            <img alt="여행기간" src="<%=cp%>/tour/image/listArticle/label_detail_t01.gif">
                        </th>
                        <td class="torg1">
                            <span style="font-weight:bold;"> 여행기간.. </span>
                        </td>
                    </tr>
                    <tr>
                        <th scope="row">
                            <img alt="포인트" src="<%=cp%>/tour/image/listArticle/label_detail_t05.gif">
                        </th>
                        <td>
                            포인트란..
                        </td>
                    </tr>
                    <tr>
                        <th scope="row">
                            <img alt="상품가격" src="<%=cp%>/tour/image/listArticle/label_detail_t08.gif">
                        </th>
                        <td>
                            <strong><span class="t24 fm1 torg">${dto.price}</span><span class="t14 tblack">원</span></strong>
                        </td>
                    </tr>
                    <tr>
                        <th class="vt" scope="row">
                            <img alt="담당자 리뷰" src="<%=cp%>/tour/image/listArticle/label_detail_t09.gif">
                        </th>
                        <td>
                            담당자 리뷰란.. 
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
    
<style>        
    /* 월 표시 달력용*/
    #sliderMon td { padding: 0px 1px 0px 1px; }
    .rollover { cursor: pointer; }
</style>
<script> 
    $(document).ready(function () {
        // 달 선택시 효과
        $('#tblPkgHeader .rollover').hover(
            function () {
                if (this.src.indexOf('c.gif') == -1) {
                    this.src = this.src.replace('.gif', 'c.gif');
                }
            },
            function () {
                if (this.className.indexOf('selected') == -1) {
                    this.src = this.src.replace('c.gif', '.gif');
                }
            }
        )
        .click(function () {
            if (this.className.indexOf('mon') > -1) {
                // 선택되어 있는 옵션 해제
                $("#tblPkgHeader .rollover.mon").removeClass('selected')
                .attr("src", function () { return this.src.replace('c.gif', '.gif'); });
 
                // 해당 obj 선택 처리
                $(this).addClass("selected")
                    .attr("src", function () { return this.src.replace('.gif', 'c.gif') });
 
                // iFrame 링크 이동
                var year = $(this).attr('year');
                var month = $(this).attr('month');
                
                $('#imgYear').attr('src', '<%=cp%>/tour/image/listArticle/daylist_y_' + year + '.gif');
                $("#ifrPkgList").attr("src", "<%=cp%>/tour/image/listArticle/FreeListMoreIframe.aspx?masterCode=JPF6073&heightmode=1&year=" + 2012 + "&month=" + 12 + "&after=" + $('#sliderMon img').index(this));
            }
        });
 
        // 좌우 스크록 동작
        $('.btnScroll').click(function () {
            divScroll(this.id);
        });
    });
 
    function divScroll(type) {
        $slider = $("#sliderMon");
        var offset = $("#sliderMon").width();
 
        if (type == "btnPrev") {
            if ($slider.scrollLeft() == 0) {
                alert('더 이상 이전 달로 갈 수 없습니다.');
                return false;
            }
            else {
                $slider.animate({ scrollLeft: $slider.scrollLeft() - offset }, 500, SetYear);
            }
        }
        else if (type == "btnNext") {
            if (($slider.attr("scrollWidth") - offset) <= $slider.scrollLeft()) {
                alert("더 이상 다음 달로 갈 수 없습니다.");
            }
            else {
                $slider.animate({ scrollLeft: ($slider.scrollLeft() + offset) }, 500, SetYear);
            }
        }
 
    }
 
    function SetYear() {
        var year = 2012;
        var mon = 12;
        // 달 하나당 크기
        var offset = (document.getElementById("sliderMon").scrollWidth / $('#tblPkgHeader .rollover.mon').length) + 10;
        // 몇개의 달이 스크롤 되었는지 계산한다.
        mon = mon + parseInt($("#sliderMon").scrollLeft() / offset, 10)
        // 지나간 달만큼 년수를 계산 - 12월의 경우 12로 나누면 1이 되어 년도가 올라가므로 소숫점을 더해서 나눠줌.
        year = year + parseInt(mon / 12.00001, 10);
 
        $('#imgYear').attr('src', '<%=cp%>/tour/image/listArticle' + year + '.gif');
    }
</script>
<div id="free_schedule">
    <div id="tblPkgHeader" class="clearFix">
        <div class="prev_btn floatL">
               </div>
        <div class="year floatL"  style="position: relative; left:400px;" >
            <img id="imgYear" alt="2012" src="<%=cp%>/tour/image/listArticle/daylist_y_2013.gif" width="59" height="29"></div>
        <div id="sliderMon" class="slidemon floatL" style="vertical-align:bottom;">
       
        </div>
        <div class="next_btn floatL">
            </div>
        <div class="bgr">
        </div>
    </div>
    <div class="shedule_ifram">
        <!-- [s] shedule_iframe -->
        <table width="100%" class="tbsdType" cellSpacing="0" cellPadding="0">						
			<colgroup>
				<col width="12%"/>
				<col width="10%"/>
				<col width="10%"/>
				<col width="*%"/>
				<col width="10%"/>
				<col width="10%"/>
			</colgroup>
			<thead>
				<tr>
					<th>출발일</th>
					<th>기간</th>
					<th>교통</th>
					<th>상품명</th>
					<th>상품가</th>
					<th>예약상태</th>
				</tr>
			</thead>
			<tbody align="center">
			
			<c:forEach var="dto2" items="${lists}">
				<tr>
					<td class="colorB"><b>${dto2.startDate}</b></td>
					<td></td>
					<td><img alt="대한항공" src="<%=cp%>/tour/image/listArticle/01_KE.jpg" border="0" complete="complete"/></td>
					<td class="alignL">
					<a href="<%=cp%>/tour/tourArticle.action?tourNo=${dto2.tourNo}&startDate=${dto2.startDate}"><b>${dto2.subject}</b></a><br/>
					
					</td>
					<td class="colorR"><strong class="fm1"><span class="pt1">${dto2.price}</span></strong></td>
					<td><a href="<%=cp%>/reservation/created.action?gubun=1&gubunNo=${dto2.tourNo}"><img src="<%=cp%>/tour/image/listArticle/btn_master_reserve.gif" complete="complete"/></a></td>
				</tr>
			</c:forEach>	
				
			</tbody>
		
		</table>
        <!-- [e] shedule_iframe -->
    </div>
</div>
 
    <!-- [e] freeMaster 내용  -->
 
            </div>
            <hr />
            
        <hr />
</body>
</html>